<template>
  <div class="hello">
    <h1 v-bind:title="message" >{{ msg }}</h1>
    <h2 v-if ="show" v-on:click="goNext()" >{{ show }}</h2>
    <!-- <h2>Essential Links</h2> -->
    <!-- <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
      <br>
      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul> -->
    <div >
      <ul>
        <li v-for="item in itemsTest">{{ item.text }}</li>
      </ul>
    </div> 
    <div>
      <p>{{message}}</p>
      <input type="text" v-model="message">
    </div>
  </div>
</template>

<script>
// export default {
//   name: 'HelloWorld',
//   data () {
//     return {
//       msg: 'Welcome to Your Vue.js App'
//     }
//   }
// }
export default {
  name: 'helloWorld',
  data () {
    return {
      msg: '人生苦短，何必念念不忘。',
      message: '123456789',
      show: true,
      itemsTest: [
        { id: 0, text: '蔬菜' },
        { id: 1, text: '奶酪' },
        { id: 2, text: '随便其他什么人吃的东西' }
      ]
    }
  },
  methods: {
    goNext() {
      console.log(this);
    } 
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
